import React from 'react'
import { Button, Input, Row, Col, Form, InputNumber } from 'antd'
import FormulaSetting from 'components/template/formula/formula-setting'
import FormulaField from 'components/template/formula/formula-field'

const FormItem = Form.Item;

export default {
  key: 'formula',
  name: 'Formula 公式',
  author: '张然',
  description: '公式表单相关组件。',
  api: [
    {
      title: '公式编辑器API',
      data: [{
        param: 'disabled', description: '是否禁用。', type: 'bool', defaultValue: '-'
      }, {
        param: 'placeholder', description: '没有值时显示的提示文字。', type: 'string', defaultValue: '请点击编辑公式'
      }, {
        param: 'formatShowValue', description: '组件显示文字的渲染方法，参数为内部因子数组，数组内每一项如果是表单项则为表单对象，否则为一个字符。', type: 'function(factors)', defaultValue: '见代码'
      }, {
        param: 'fields', description: '外部所有的表单项列表，不需要过滤数字型表单项。', type: 'array', defaultValue: '[]'
      }, {
        param: 'onChange', description: '值变化时的回调，会通过::formatFactor::进行转换。', type: 'function(value)', defaultValue: '-'
      }, {
        param: 'formatFactor', description: '::onChange::返回数据的转化方法，参数有两种形式，如果是表单项则为表单项对象，否则为一个字符。', type: 'function(factor)', defaultValue: '见代码'
      }, {
        param: 'defaultValue', description: '默认值，会通过::parseFactor::进行转换。', type: 'any', defaultValue: '-'
      }, {
        param: 'parseFactor', description: '默认值转换方法，结果应该为一个数组，数组内每一项如果是表单项则为表单对象，否则为一个字符。', type: 'function(value, fields)', defaultValue: '见代码'
      }, {
        param: 'testValid', description: '在点击确定按钮前判断公式是否合法的方法，如果合法则需要返回::true::，第一个参数是经过::formatFactor::转化后的字符串，第二个参数是传入的表单项，第三个参数是内部::factor::数组。', type: 'function(formula, fields, factors)', defaultValue: '见代码'
      }],
      description: '公式编辑组件::FormulaSetting::的API'
    },
    {
      title: '公式表单项API',
      data: [{
        param: 'formula', description: '读取公式。', type: 'any', defaultValue: '-'
      }, {
        param: 'form', description: '所属表单。', type: 'form', defaultValue: '-'
      }, {
        param: 'fields', description: '外部所有的表单项列表，不需要过滤数字型表单项。', type: 'array', defaultValue: '[]'
      }, {
        param: 'readFormula', description: '从公式生成数据的方法，参数依次为公式、表单、现在的数据、所有表单项。', type: 'function(formula, form, source, fields)', defaultValue: '见代码'
      }],
      description: '公式表单项组件::FormulaField::的API，其余与::InputNumber::一致'
    }
  ],
  example: [
    {
      title: '设置基础用法',
      description: '公式设置使用::FormulaSetting::，公式表单项使用::FormulaField::。',
      state: {
        formula: '',
        fields: [{
          fieldOID: '1',
          fieldName: '单价',
          messageKey: 'number'
        }, {
          fieldOID: '2',
          fieldName: '数量',
          messageKey: 'number'
        }, {
          fieldOID: '3',
          fieldName: '不是数字类型',
          messageKey: 'input'
        }, {
          fieldOID: '4',
          fieldName: '一个名字很长的数量（大概这么长）',
          messageKey: 'number'
        }, {
          fieldOID: '5',
          fieldName: '公式组件',
          messageKey: 'formula'
        }]
      },
      getMethod: context => {
        return {
          getField: field => {
            const { formula, fields } = context.state;
            const { form } = context.props;
            const { getFieldDecorator } = form;
            let fieldDOM = null;
            switch(field.messageKey) {
              case 'number':
                fieldDOM = <InputNumber />;
                break;
              case 'input':
                fieldDOM = <Input />;
                break;
              case 'formula':
                fieldDOM = <FormulaField form={form} formula={formula} fields={fields} />;
                break;
            }
            return <FormItem label={field.fieldName}>
              {getFieldDecorator(field.fieldOID)(fieldDOM)}
            </FormItem>
          }
        }
      },
      getContent: context => {
        const { fields } = context.state;
        return (
          <div>
            <FormulaSetting
              fields={fields}
              onChange={formula => context.setState({ formula })}
            />
            <br/><br/><br/>
            <Form>
              {fields.map(context.getField)}
            </Form>
          </div>
        )
      }
    }
  ]
}
